<template>
  <div class="fy-table-container">
    <vxe-table :data="tableData" :edit-config="{ mode: 'cell', trigger: 'click' }" class="fy-table" v-bind="$attrs"
      :column-config="columnConfig" :loading="loading">
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column v-for="column in columns" :field="column.field" :title="column.title" :key="column.prop"
        :edit-render="column.editRender">
        <template #edit="scope" v-if="column.editRender">
          <slot :name="column.slots.edit" v-bind="scope"></slot>
        </template>
        <template #default="scope" v-if="showDefaultSlot(column)">
          <slot :name="column.field" v-bind="scope"></slot>
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-pager :current-page.sync="pagination.currentPage" :page-size.sync="pagination.pageSize"
      :total="pagination.total"
      :layouts="['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
      @page-change="pageChange">
    </vxe-pager>
  </div>
</template>


<script>

const tableData = [
  { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
  { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
  { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
  { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
]
export default {
  name: 'FyTableComponent',
  props: {
    columnConfig: {
      type: Object,
      default: () => ({
        resizable: true
      })
    }
  },

  data() {

    const columns = [
      {
        field: 'name',
        title: 'Name',
        editRender: {
          autoFocus: true
        },
        slots: {
          edit: 'edit_name'
        }
      },
      {
        field: 'sex',
        title: 'Sex',
        editRender: {
          autoSelect: true,
          options: [
            {
              label: '男',
              value: 1
            },
            {
              label: '女',
              value: 2
            }
          ]

        },
        slots: {
          edit: 'edit_sex'
        },

      },
      {
        field: 'age',
        title: 'Age'
      }
    ]
    return {
      loading: false,
      tableData,
      columns,
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      }
    }
  },
  mounted() {

  },
  methods: {
    loadData() {
      if(this.loading) return
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 2000);
    },
    showDefaultSlot(column) {
      const slots = { ...this.$slots, ...this.$scopedSlots }
      if (slots[column.field]) {
        return true
      }
      return false
    },
    pageChange({ pageSize, currentPage }) {
      this.pagination.currentPage = currentPage
      this.pagination.pageSize = pageSize
    }
  }
}
</script>
<style lang="scss" scoped>
.fy-table-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;

  .fy-table {
    flex: 1;
  }
}
</style>
